<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../index.css">
</head>
<body>
    <h4>head</h4>
    <pre>
        head是头部元素，包含的内容不会显示在页面上，head可以包含标题信息，元信息，样式表，脚本等。
        <xmp>
            <meta>标签提供页面相关数据信息，比如<meta charset="UTF-8" />定义文档使用UTF-8编码方式，同时还可以设置页面描述，关键词等信息，有利于SEO
            <meta name="description" content="网站描述信息" />
            <meta name="keywords" content="网站关键字" />
            <title>标签定义页面标题，显示在浏览器打开的选项卡上面；
            <link>标签用于链接与页面相关的外部资源，如css文件和ico图标
            <link rel="stylesheet" href="xxx.css">
            <link rel="icon" href="xxx.ico">
        </xmp>
            除了link标签引入外部css，还可以在head里面直接通过style标签直接定义样式
            script标签用于引入脚本文件
            注：在HTML5中，style和script标签的type值不是必须的，默认为'text/css'、'text/javascript'
    </pre>
    <h4>body</h4>
    
    body元素定义文档的主体，所有页面上显示的内容都包含在body内部。
    <h4>HTML语义化</h4>
    html语义化即通过标签名就能判断标签内容，同时有利于SEO。
    语义元素的名称其实也很好理解，下面是它们的作用和用法：
    <xmp>
    
        <header> 标签通常放在页面或页面某个区域的顶部，用来设置页眉；
        <nav> 标签可以用来定义导航链接的集合，点击链接可以跳转到其他页面；
        <article> 标签中的内容比较独立，可以是一篇新闻报道，一篇博客，它可以独立于页面的其他内容进行阅读；
        <section> 标签表示页面中的一个区域，通常对页面进行分块或对内容进行分段，<section> 标签和 <article> 标签可以互相嵌套；
        <aside> 标签用来表示除页面主要内容之外的内容，比如侧边栏；
        <footer> 标签位于页面或页面某个区域的底部，用来设置页脚，通常包含版权信息，联系方式等。<br>
    </xmp>
    <img style="width:400px;height:200px;" src="https://cdn.nlark.com/yuque/0/2018/png/199663/1544180720457-6e1c631d-4a2e-4c29-9afa-c6668256a369.png" />
</body>
</html>